<template>
	<div class="login-container">
		<video :style="fixStyle" src="../../../static/video/video1.mp4" autoplay loop muted  class="fillWidth">
			<source src="../../../static/video/video1.mp4" type="video/mp4" />
			浏览器不支持 video 标签，建议升级浏览器。
			<source src="../../../static/video/video1.mp4" type="video/webm" />
			浏览器不支持 video 标签，建议升级浏览器。
		</video>
		<div class="loginCenter">
			<div class="login-warp">
				<div class="login-opcity"></div>
				<div class="login-no">
					<h2 class="h2">登录</h2>
					<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm" label-position="left">
						<el-form-item label="登录名" prop="loginName">
							<el-input v-model="ruleForm.loginName"></el-input>
						</el-form-item>
						<el-form-item label="密码" prop="password">
							<el-input v-model="ruleForm.password" type="password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
						</el-form-item>
						<el-button type="primary" class="buttom" @click="submitForm('ruleForm')" size="small">登录</el-button>
					</el-form>
				</div>
			</div>
		</div>
		<el-dialog title="提示" :visible.sync="verification.dialogVisible" width="450px">
			<slide-verify ref="mySlideVerify" :l="42" :r="10" :w="400" :h="205" @success="onSuccess" @fail="onFail" @refresh="onRefresh"
			 :slider-text="verification.text"></slide-verify>
		</el-dialog>
	</div>
</template>

<script>
	let that=''
	//非父子组件传值
	import bus from '../../../static/js/bus.js';
	import {
		mapActions,
		mapGetters
	} from 'vuex';
	// https://blog.csdn.net/monoplasty/article/details/85016089#_2
	import SlideVerify from 'vue-monoplasty-slide-verify/src/lib/slide-verify.vue'; //注意如果存在滑块位置找不到，需要修改源码中ctx.globalCompositeOperation = 'destination-over'//解决绘制层级覆盖问题
	export default {
		name: 'Login',
		components: {
			SlideVerify
		},
		computed: {
			...mapGetters(['userInfo', 'api']) //获取
		},
		data() {
			return {
				videoSrc:'../../../static/video/video1.mp4',
				videoNum:1,
				fixStyle: '',
				ruleForm: {
					loginName: '',
					password:'',
				},
				rules: {
					loginName: [{
							required: true,
							message: '请输入登录名',
							trigger: 'blur'
						}
					],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					},
					// {
					// 	min: 6,
					// 	message: '长度不能少于6位',
					// 	trigger: 'blur'
					// },
					],
				},
				//滑块验证
				verification: {
					text: '向右滑',
					dialogVisible: false, //弹出框
				},
			}
		},
		watch: {},
		mounted() {
			that=this
			this.init()
		},
		methods: {
			...mapActions(['set_Login_info', 'set_isChangePassword', 'delAllViews']),
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						that.verification.dialogVisible = true;
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			async login(){
				let req={
					ln:await that.$lizhao.RSA.rsaEncode(that.ruleForm.loginName),
					pwd:await that.$lizhao.RSA.rsaEncode(that.ruleForm.password)
				}
				that.GLOBAL.doPost(that.api.GLOBAL_account_login,req).then(res=>{
					that.verification.dialogVisible = false
					// 刷新
					that.$refs.mySlideVerify.reset();
					if(res.code==0){
						that.$router.push({name:'sealList',path:'/sealList'})
						that.set_Login_info(res.data)
					}
				}).catch((err)=>{
					that.verification.dialogVisible = false;
					// 刷新
					that.$refs.mySlideVerify.reset();
				})
			},
			//滑块验证成功
			onSuccess() {
				let that = this;
				that.login()
			},
			onFail() {},
			onRefresh() {},
			// 监听窗口修改视频大小
			init(){
				//随机选取视频
				let num=Math.random()*10
				if(num<4){
					that.videoNum=2
				}else if(num>3&&num<7){
					that.videoNum=1
				}else{
					that.videoNum=3
				}
				
				window.onresize = () => {
					const windowWidth = document.body.clientWidth
					const windowHeight = document.body.clientHeight
					const windowAspectRatio = windowHeight / windowWidth
					let videoWidth
					let videoHeight
					if (windowAspectRatio < 0.5625) {
						videoWidth = windowWidth
						videoHeight = videoWidth * 0.5625
						this.fixStyle = {
							height: windowWidth * 0.5625 + 'px',
							width: windowWidth + 'px',
							'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
							'margin-left': 'initial'
						}
					} else {
						videoHeight = windowHeight
						videoWidth = videoHeight / 0.5625
						this.fixStyle = {
							height: windowHeight + 'px',
							width: windowHeight / 0.5625 + 'px',
							'margin-left': (windowWidth - videoWidth) / 2 + 'px',
							'margin-bottom': 'initial'
						}
					}
				}
				window.onresize()
			}
		}
	};
</script>
<style rel="stylesheet/scss" lang="scss">
	$bg: #2d3a4b;
	$light_gray: #fff;
	$assistance_color: #029789;

	.login-container {
		width: 100%;height: 100%;overflow: hidden;position: relative;
		.fillWidth {
			width: 100%;height: 100vh;
		}
		.loginCenter{
			width: 100%;height: 100%;position: absolute;left: 0;top: 0;display: flex;justify-content: center;align-items: center;
			.login-warp{
				width: 400px;height:400px;position: relative;
				.login-opcity{
					opacity: 0.5;background: white;width: 100%;height: 100%;border-radius: 10px;
				}
				.login-no{
					position: absolute;left: 0;top: 0;width: 100%;height: 100%;padding:20px;box-sizing: border-box;
					.demo-ruleForm{
						width: 100%;margin-top: 50px;
					}
					.h2{
						width: 100%;color: #474747;letter-spacing: 20px;text-align: center;padding-left: 20px;box-sizing: border-box;
					}
					.buttom{
						width: 100%;margin-top: 20px;
					}
				}
			}
		}
	}
</style>
